<template>
  <div class="container">
    <div class="title">Input组件Demo</div>
    <InputDemo1></InputDemo1>
    <InputDemo2></InputDemo2>
    <InputDemo3></InputDemo3>
    <InputDemo4></InputDemo4>
  </div>
</template>

<script setup lang="ts">
import InputDemo1 from "../components/Input/InputDemo1.vue";
import InputDemo2 from "../components/Input/InputDemo2.vue";
import InputDemo3 from "../components/Input/InputDemo3.vue";
import InputDemo4 from "../components/Input/InputDemo4.vue";
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  padding: 50px 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  .title {
    font-size: 36px;
    margin-bottom: 25px;
    margin-left: 50px;
  }
}
</style>
